<template>
  <div class="treeComponent">
    <div class="block">
      <el-tree :data="treeData" :show-checkbox="showCheckbox" node-key="id" default-expand-all :expand-on-click-node="false" highlight-current>
        <div class="custom-tree-node" slot-scope="{ node, data }" @mousemove="hover(node)" @mouseleave="leave(node)">
          <p>{{ node.label }}</p>
          <div v-if='node.isHovering'>
            <el-button type="text" size="mini" @click="() => append(node, data)">
              <i class="el-icon-plus"></i>
            </el-button>
            <el-button type="text" size="mini" @click="() => edit(node, data)">
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button type="text" size="mini" @click="() => remove(node, data)">
              <i class="el-icon-delete"></i>
            </el-button>
          </div>
        </div>
      </el-tree>
      <el-dialog title="设置" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="名称">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </div>
      </el-dialog>
      <el-button type="primary" @click="showData">json</el-button>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
let id = 1000
export default {
  name: 'treePage',
  props: {
    // 树形结构数据
    treeData: {
      type: Array
    },
    // 是否可勾选
    showCheckbox: {
    }
  },
  data () {
    return {
      dialogFormVisible: false,
      form: {
        name: '',
        id: '',
        children: []
      },
      node: {},
      data: {},
      clickFlag: 0
      // isShowCheckbox: false
    }
  },
  created () {
    console.log(this.treeData)
  },
  methods: {
    // 鼠标hover
    hover (node) {
      this.$set(node, 'isHovering', true)
    },
    // 鼠标leave
    leave (node) {
      this.$set(node, 'isHovering', false)
    },
    // 新增子节点
    append (node, data) {
      this.clickFlag = 1
      // const newChild = { id: id++, label: 'testtest', children: [] }
      // if (!data.children) {
      //   this.$set(data, 'children', [])
      // }
      // data.children.push(newChild)
      this.dialogFormVisible = true
    },
    // 编辑节点
    edit (node, data) {
      console.log(data.id)
      this.clickFlag = 2
      this.dialogFormVisible = true
    },
    // 移除节点
    remove (node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === data.id)
      children.splice(index, 1)
    },
    // dialog确定
    confirm () {
      if (this.clickFlag === 1) {
        const newChild = { id: id++, label: this.form.name, children: [] }
        if (!this.data.children) {
          this.$set(this.data, 'children', [])
          console.log('hahhah', this.data, this.treeData)
        }
        this.data.children.push(newChild)
      } else if (this.clickFlag === 2) {
        this.data = {
          label: this.form.name
        }
        console.log(this.data)
      }
      this.dialogFormVisible = false
      this.form = {}
    },
    // dialog取消
    cancel () {
      this.dialogFormVisible = false
    },
    // 展示返回的json
    showData () {
      console.log(this.treeData)
    }
  }
}
</script>
<style lang="scss" scoped>
.custom-tree-node {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
